<template>
  <div class="w-full h-full bg-repeat min-h-[100vh] pb-[0.0521rem]" style="background: #00091a">
    <TopTitle></TopTitle>

    <div class="flex mt-[0.026rem] ml-[0.0677rem]">
      <div class="flex flex-col">
        <LeftQuickDetection :data="FastCheckInfoList"></LeftQuickDetection>
        <LeftUserStatistics
          :data="FastCheckInfoList"
          :UserDeviceInfoList="UserDeviceInfoList"
        ></LeftUserStatistics>
        <LeftDailyHealthCharacteristics :data="FastCheckInfoList"></LeftDailyHealthCharacteristics>
      </div>
      <div>
        <MapContent :reqDate="OnlineUserList" :UserDeviceInfoList="UserDeviceInfoList"></MapContent>
      </div>
      <div class="flex flex-col">
        <RightDeepMonitoring :data="DeepMonitorInfoList"></RightDeepMonitoring>
        <RightUserStatistics
          :data="DeepMonitorInfoList"
          :UserDeviceInfoList="UserDeviceInfoList"
        ></RightUserStatistics>
        <RightDailyHealthCharacteristics
          :data="DeepMonitorInfoList"
        ></RightDailyHealthCharacteristics>
      </div>
    </div>
  </div>
</template>
<script setup>
// 头部
import TopTitle from '@/views/components/TopTitle.vue'

// 左侧快速检测实时监控
import LeftQuickDetection from '@/views/components/Left/LeftQuickDetection.vue'

// 左侧用户统计
import LeftUserStatistics from '@/views/components/Left/LeftUserStatistics.vue'

// 左侧当日健康特征统计
import LeftDailyHealthCharacteristics from '@/views/components/Left/LeftDailyHealthCharacteristics.vue'

// 中间区域
import MapContent from '@/views/components/Center/MapContent.vue'

// 右侧深度监测实时监控
import RightDeepMonitoring from '@/views/components/Right/RightDeepMonitoring.vue'

// 右侧用户统计
import RightUserStatistics from '@/views/components/Right/RightUserStatistics.vue'

// 右侧当日健康特征统计
import RightDailyHealthCharacteristics from '@/views/components/Right/RightDailyHealthCharacteristics.vue'
import {
  getDeepMonitorInfo,
  getFastCheckInfo,
  getOnlineUser,
  getUserDeviceInfo,
  login
} from '@/api/index.js'
import { nextTick, ref } from 'vue'
import { useRouter } from 'vue-router'

// 快速检测统计信息
const FastCheckInfoList = ref('')

// 获取当前在线用户
const OnlineUserList = ref('')

// 获取用户和设备统计信息
const UserDeviceInfoList = ref('')

// 深度检测统计信息
const DeepMonitorInfoList = ref('')

const loginInfo = async () => {
  let res = await login({
    params: {
      userName: 'market-plus',
      userSecret: '123456'
    },
    action: 'getToken',
    token: '',
    session: '',
    userId: ''
  })

  sessionStorage.setItem('token', res.data.data.token)
}

loginInfo()

// 获取快速检测统计信息
const getFastCheckInfoList = async () => {
  let res = await getFastCheckInfo({
    token: sessionStorage.getItem('token')
  })
  FastCheckInfoList.value = res.data.data
}

// 获取获取当前在线用户
const getOnlineUserList = async () => {
  let res = await getOnlineUser({
    token: sessionStorage.getItem('token'),
    params: 46
  })
  OnlineUserList.value = res.data.data
}

// 获取用户和设备统计信息
const getUserDeviceInfoList = async () => {
  let res = await getUserDeviceInfo({
    params: ''
  })

  UserDeviceInfoList.value = res.data.data
}

// 获取深度监测统计信息
const getDeepMonitorInfoList = async () => {
  let res = await getDeepMonitorInfo({
    params: ''
  })
  DeepMonitorInfoList.value = res.data.data
}


getFastCheckInfoList()
getOnlineUserList()
getUserDeviceInfoList()
getDeepMonitorInfoList()
</script>

<style scoped lang="scss"></style>
